<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="src-ignoreable/WorldMargin.png" type="image/x-icon">
    <title>firework demo</title>
    <script src="./firework.js"></script>
    <script>
        let firework;
        window.onload = ()=> {
            canvas=document.getElementById("firework-canvas");              //get canvas context    (required) //flip y axis           (required)
            let ctx =canvas.getContext("2d");
            firework = new FireworkCanvas(
                ctx, 
                canvas.width, 
                canvas.height,
                10,                                     /* max rendering fireworks(max_fireworks) */
                args={
                    gravity: 50,
                    speed: 150,
                    life_time: 3,
                    explode_time: 2,
                    explode_particles: 125,
                    wake_particles: 60,
                    radius: 2,
                    color_random: false
                }
            );
            firework.updateSize(canvas,window);
            firework.autoResize(canvas,window);
            firework.setAutoCloseOrStart();
            setInterval(()=>{
                firework.addRandomFirework();           //just run after start
            }, 1000);

            startButton = document.getElementById("control-button");
            startButton.onclick = ()=> {
                if (firework.is_running()) {             //check if firework is running
                    firework.stop();
                    startButton.innerHTML = "启动";
                } else {
                    firework.start();
                    startButton.innerHTML = "停止";
                }
            };
        };
    </script>
</head>
<body style="background-color: black;">
    <canvas id="firework-canvas" style="width: 100vw;height: 100vh;background-image: url('src-ignoreable/WorldMargin.svg');background-size: auto;background-repeat: no-repeat;background-position: center;"></canvas>
    <button id="control-button">启动</button>
    <textarea name="" id="set_arg" placeholder="设置参数(set args)" ></textarea>
    <button id="set_arg_button">确认</button>


    <script>
        button=document.getElementById("set_arg_button");
        button.onclick = ()=> {
            firework.setArgs(eval("Object("+document.getElementById("set_arg").value+")"));
        };

    </script>
    
</body>
</html>